<template>
  <view class='nav-list margin-top'>
    <navigator open-type="navigate" hover-class='none' :url="item.url" class="nav-li" :style="{backgroundColor:item.bgColor}" v-for="(item, index) in datas" :key="index">
      <view class="nav-name">{{item.name}}</view>
    </navigator>
  </view>
</template>

<script>
export default {
  props: {
    datas: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 40upx 0px;
  justify-content: space-between;
  .nav-li {
    padding: 30upx;
    border-radius: 12upx;
    width: 45%;
    margin: 0 2.5% 40upx;
    background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;

    &::after {
      content: '';
      position: absolute;
      z-index: -1;
      background-color: inherit;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: -10%;
      border-radius: 10upx;
      opacity: 0.2;
      transform: scale(0.9, 0.9);
    }

    &.cur {
      color: #fff;
      background: rgb(94, 185, 94);
      box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
    }
    & text {
      position: absolute;
      right: 30upx;
      top: 30upx;
      font-size: 52upx;
      width: 60upx;
      height: 60upx;
      text-align: center;
      line-height: 60upx;
    }
    .nav-name {
      font-size: 28upx;
      text-transform: Capitalize;
      margin-top: 20upx;
      position: relative;
      color: #fff;
      .nav-name::before {
        content: '';
        position: absolute;
        display: block;
        width: 40upx;
        height: 6upx;
        background: #fff;
        bottom: 0;
        right: 0;
        opacity: 0.5;
      }

      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 100upx;
        height: 1px;
        background: #fff;
        bottom: 0;
        right: 40upx;
        opacity: 0.3;
      }

      &::first-letter {
        font-weight: bold;
        font-size: 36upx;
        margin-right: 1px;
      }
    }
  }
}
</style>